import { Button, ConfigProvider } from '@antmjs/vantui'
import { View } from '@tarojs/components'
// import { useDispatch, useSelector } from 'react-redux'
import { useAppDispatch, useAppSelector } from '../store'
import { decrement, increment } from '../store/counterSlice'

definePageConfig({
  navigationBarTitleText: 'Redux 计数器 example'
})


export default function Counter() {
  const count = useAppSelector((state) => state.counter.value)
  const dispatch = useAppDispatch()

  return (
    <ConfigProvider>
      <View className='mt-10 mx-auto'>
        <View className='flex flex-row justify-center  h-screen'>
          <Button
            aria-label='Increment value'
            type='primary'
            onClick={(_e) => { dispatch(increment()) }}
          >
            Increment
          </Button>
          <View className='items-center'>{count}</View>
          <Button
            type='warning'
            aria-label='Decrement value'
            onClick={(_e) => { dispatch(decrement()) }}
          >
            Decrement
          </Button>
        </View>
      </View>
    </ConfigProvider>
  )
}
